import React from 'react';
import img from '@/assets/images/home/subject.png';
import LinearProgress from '@mui/material/LinearProgress';
import Button from '@mui/material/Button';
import './index.less';
import { useLocation, useNavigate } from 'react-router-dom';
import useToast from '@/utils/toast';
interface Props {
  data: IHomeDataCon;
}
export default function Subjects({ data }: Props) {
  // console.log(data);
  const location = useLocation();
  // 根据路径判断是谁在调用组件，如果是快速刷题，则去掉不需要的部分
  const showFast = location.pathname === '/fast' ? true : false;
  // 路由跳转
  const navigate = useNavigate();
  let toast = useToast();
  let cur = Math.round(Math.random() * data.itemCount);
  const btnClick = () => {
    if (showFast) {
      toast('warning', '该功能暂未开放');
    } else {
      navigate(`/practice/${data.actionCode}`);
    }
  };
  return (
    <div className="cSubject">
      <ul className="subject_content">
        <li className="subject_item">
          <img src={img} alt="" />
          <div className="subject_center">
            <h4 className="subject_tit">{data.title}</h4>
            <p style={{ display: showFast ? 'none' : 'block' }}>
              <span>{showFast ? '' : cur}</span>/<span>{data.itemCount}题</span>
            </p>
            <LinearProgress
              variant="determinate"
              value={showFast ? 0 : (cur / data.itemCount) * 100}
              style={{ display: showFast ? 'none' : 'block' }}
            />
          </div>
          <Button variant="contained" className="btn" onClick={btnClick}>
            {showFast ? '刷题' : '练习'}
          </Button>
        </li>
      </ul>
    </div>
  );
}
